<template>
  <Card>
    <Row class="bench_search">
      <Col span="6" offset="1">
        <span>材料名称：</span>
        <Input style="width: 70%;" v-model="searchInfo.materialsname" />
      </Col>
      <Col span="6" offset="1">
        <span>出具部门：</span>
        <Input style="width: 70%;" v-model="searchInfo.showdepartment" />
      </Col>
      <Col span="6" offset="1">
        <span>业务办理部门：</span>
        <Input style="width: 70%;" v-model="searchInfo.businessdealdepartment" />
      </Col>
      <Button class="new-btn-sty" @click="searchData" style="margin-right:10px"><Icon type="ios-search" /> 搜索</Button>
      <Button class="new-btn-sty" @click="addelectronicmaterials({})"><Icon type="md-add" /> 创建</Button>
    </Row>
    <Modal v-model="modalEdit" title="电子材料分类" width="700" cancel-text="关闭"
           @on-ok="ok(paramData2)" @on-cancel="modalEdit=false" ok-text="确定">
      <Form :model="paramData2" >
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">材料名称:</Col>
          <Col span="12" offset="1">
            <Input v-model="paramData2.materialsname"></Input>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="5" style="text-align: right" class="">出具部门:</Col>
          <Col span="12" offset="1">
            <Input v-model="paramData2.showdepartment"></Input>
          </Col>
        </Row>
        <Row class="item1" style="height:auto;line-height:auto">
          <Col span="5" style="text-align: right" class="">业务办理部门:</Col>
          <Col span="12" offset="1">
            <Input v-model="paramData2.businessdealdepartment" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
          </Col>
        </Row>
      </Form>
    </Modal>
    <Table border :columns="columns1" :data="datalist"></Table>
    <Row v-if="loadData === true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
  </Card>
</template>

<script>

import { loadelectronicmaterialsList, savematerials } from '@/api/eventlist'

export default {
  name: 'electronicmaterials',
  data () {
    return {
      modalEdit: false,
      paramData2: {},
      searchInfo: { materialsname: '', showdepartment: '', businessdealdepartment: '' },
      datalist: [],
      loadData: true,
      columns1: [
        {
          title: '序号',
          type: 'index'
        },
        {
          title: '材料名称',
          key: 'materialsname'
        },
        {
          title: '出具部门',
          key: 'showdepartment'
        },
        {
          title: '业务办理部门',
          key: 'businessdealdepartment'
        },
        {
          title: '创建时间',
          key: 'create_time'
        }
      ]
    }
  },
  methods: {
    init (param) {
      loadelectronicmaterialsList(param).then(res => {
        if (res.data.errcode === 0) {
          this.datalist = res.data.data
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取通知公告列表失败', desc: res.data.errmsg })
        }
      })
    },
    addelectronicmaterials (item) {
      this.modalEdit = true
      this.paramData2.id = item.id || null
      this.paramData2.materialsname = item.materialsname || ''
      this.paramData2.showdepartment = item.showdepartment || ''
      this.paramData2.businessdealdepartment = item.businessdealdepartment || ''
    },
    searchData () {
      let params = {
        materialsname: this.searchInfo.materialsname,
        showdepartment: this.searchInfo.showdepartment,
        businessdealdepartment: this.searchInfo.businessdealdepartment
      }
      this.init(params)
    },
    ok (param) {
      savematerials(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '成功', desc: '' })
          this.init(null)
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init(null)
  }
}
</script>

<style scoped>
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.bench_search {
  margin-bottom: 10px;
}
</style>
